<template>
  <div id="mainCon" ref="mainCon">
    <form action="/">
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        show-action
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <!-- Banner star -->
    <van-swipe :autoplay="3000" indicator-color="white" class="swipe-con">
      <van-swipe-item v-for="(item,index) in banner" :key="index">
        <img :src="item" alt />
      </van-swipe-item>
    </van-swipe>
    <!-- Banner ent-->
    <van-notice-bar text="比油条还好吃的美食，现在却很难买到。" left-icon="volume-o" />
    <!-- 首页导航 S -->
    <div class="s-con">
      <van-row class="homeNavWarp">
        <van-col span="6" class="homeItem" >
          <van-icon name="location" />
          <p class="Icon-text" @click="queryUserInfo">定位</p>
        </van-col>
        <van-col span="6" class="homeItem">
          <van-icon name="like" />
          <p class="Icon-text" @click="queryList">关注</p>
        </van-col>
        <van-col span="6" class="homeItem">
          <van-icon name="star" />
          <p class="Icon-text">star</p>
        </van-col>
        <van-col span="6" class="homeItem">
          <van-icon name="phone" />
          <p class="Icon-text">联系方式</p>
        </van-col>
        <van-col span="6" class="homeItem">
          <van-icon name="setting" />
          <p class="Icon-text">设置</p>
        </van-col>
        <van-col span="6" class="homeItem">
          <van-icon name="fire" />
          <p class="Icon-text">热销</p>
        </van-col>
        <van-col span="6" class="homeItem">
          <van-icon name="coupon  " />
          <p class="Icon-text">卡卷</p>
        </van-col>
        <van-col span="6" class="homeItem">
          <van-icon name="cart" />
          <p class="Icon-text">购物车</p>
        </van-col>
      </van-row>
    </div>
    <!-- 首页导航 E -->
    <!-- 热销 S -->
    <div class="s-con">
      <div class="hotWarp">
        <van-row>
          <van-col span="12" class="tr">
            <div class="info">
              <div class="info-hd">
                <h4 class="tit">淘抢购</h4>
              </div>
              <div class="proInfo">
                <img
                  class="pro"
                  src="https://gw.alicdn.com/bao/uploaded/i3/2861689487/O1CN01rLGvsL2Jx5xW8Naj3_!!0-item_pic.jpg"
                />
              </div>
            </div>
          </van-col>
          <van-col span="12" class="tr">
            <div class="info">
              <div class="info-hd">
                <h4 class="tit">淘抢购</h4>
              </div>
              <div class="proInfo">
                <img
                  class="pro"
                  src="https://img.alicdn.com/tps/i4/TB1iMNjsOrpK1RjSZFhSutSdXXa.jpg"
                />
              </div>
            </div>
          </van-col>
          <van-col span="12" class="tr">
            <div class="info">
              <div class="info-hd">
                <h4 class="tit">淘抢购</h4>
              </div>
              <div class="proInfo">
                <img
                  class="pro"
                  src="https://gw.alicdn.com/bao/uploaded/i4/2030121861/O1CN01FtSYzl1PcNYORjVmH_!!0-item_pic.jpg"
                />
              </div>
            </div>
          </van-col>
          <van-col span="12" class="tr">
            <div class="info">
              <div class="info-hd">
                <h4 class="tit">淘抢购</h4>
              </div>
              <div class="proInfo">
                <img
                  class="pro"
                  src="https://gw.alicdn.com/bao/uploaded/i3/1640495040/O1CN01gFYOSN1n6MelWEoKE_!!0-item_pic.jpg"
                />
              </div>
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
    <!-- 热销 E -->
    <!-- 商品标签 S -->
    <!-- 商品标签 E -->
    <van-tabs v-model="active" animated id="activeNav" :class="{handScroll:ishandScroll}">
      <van-tab v-for="(item,key) in tabs" :title="item.label" :key="key">{{ item.conter }}</van-tab>
    </van-tabs>
    <!-- 商品标签 E -->
    <!-- <div class="proBox" ref="mescroll"></div> -->
    <!-- 商品标签 E -->
    <div class="proBox" id="proBox">
      <!-- <div class="mescroll wrapper">
        <div class="lis" v-for="(item,index) in proArr" :key="index">
          <div class="img-wrap">
            <img :src="item.src" alt="">
          </div>
          <div class="pro-info">
            <h4 class="tit">{{item.tit}}</h4>
            <div class="flex-space-between">
              <div>
                <span class="label">公益宝贝</span>
                <span class="label">包邮</span>
              </div>
              <div>
                <span class="site">{{item.site}}</span>
              </div>
            </div>
            <div class="flex-space-between">
              <div class="price-con">
                <span class="price">
                  ￥
                  <em>{{item.price}}</em>
                </span>
                <span class="pro-hot">{{item.proHot}}</span>
              </div>
              <div class="proInfo">
                <span>。。。</span>
              </div>
            </div>
          </div>
        </div>
      </div>-->
      <div class="wrapper" ref="wrapper">
        <div class="bscroll-container" :style=" scrollConfig.transform">
          <!-- 刷新提示信息 -->
          <div class="top-tip" ref="Toptip">
            <!-- <span class="refresh-hook">{{pulldownMsg}}</span> -->
            <div class="before-trigger" v-if="scrollConfig.beforePullDown">
              <bubble :y="scrollConfig.bubbleY"></bubble>
            </div>
            <div class="after-trigger" v-else>
              <div v-if="scrollConfig.isPullingDown" class="loading">
                <loading></loading>
              </div>
              <div v-else>
                <span>{{ scrollConfig.refreshTxt}}</span>
              </div>
            </div>
          </div>
          <!-- 内容列表 -->
          <!-- 用box来撑起内容高度 实现数据不够时  可以滑动  页面初始化时计算出合理的高度-->
          <div ref="content" class="content">
            <!-- <ul class="content"> -->
            <!-- <li v-for="(item,index) in scrollConfig.data" :key="index">{{item}}</li> -->
            <div class="lis" :class="index" v-for="(item,index) in proArr" :key="index">
              <div class="img-wrap">
                <img :src="item.src" alt />
              </div>
              <div class="pro-info">
                <h4 class="tit">{{item.tit}}</h4>
                <div class="flex-space-between">
                  <div>
                    <span class="label">公益宝贝</span>
                    <span class="label">包邮</span>
                  </div>
                  <div>
                    <span class="site">{{item.site}}</span>
                  </div>
                </div>
                <div class="flex-space-between">
                  <div class="price-con">
                    <span class="price">
                      ￥
                      <em>{{item.price}}</em>
                    </span>
                    <span class="pro-hot">{{item.proHot}}</span>
                  </div>
                  <div class="proInfo">
                    <span>。。。</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- </ul> -->
          </div>
          <!-- 底部提示信息 -->
          <div class="bottom-tip">
            <div v-if="scrollConfig.isPullingUp" class="loading">
              <loading></loading>
            </div>
            <span v-else class="loading-hook">{{ scrollConfig.pullupMsg}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
import axios from "axios"
import { _queryTitleInfo,_queryList } from "@/api/config.js"
let count = 1;
export default {
  data() {
    return {
      proArr: [],
      ishandScroll: false,
      banner: [
        "https://img.alicdn.com/tps/i4/TB17afMyNnaK1RjSZFBSuwW7VXa.jpg_760x760Q50s50.jpg_.webp",
        "https://img.alicdn.com/tps/i4/TB1QXZVymzqK1RjSZPxSuw4tVXa.jpg_760x760Q50s50.jpg_.webp",
        "https://img.alicdn.com/tps/i4/TB1QXZVymzqK1RjSZPxSuw4tVXa.jpg_760x760Q50s50.jpg_.webp"
      ],
      value: "",
      active: 0,
      tabs: [
        { label: "全部", conter: "" },
        { label: "生活", conter: "" },
        { label: "时尚", conter: "" },
        { label: "母婴", conter: "" }
      ],
      scrollConfig: {
        data: [1, 2, 3],
        pullupMsg: "加载更多",
        refreshTxt: "刷新成功",
        pullDownInitTop: -50,
        isPullingDown: false,
        beforePullDown: true,
        isPullingUp: false,
        bubbleY: 0,
        transform: "transform: translate(0px, 0px) scale(1) translateZ(0px)"
      }
    };
  },
  watch: {
    active() {
      console.log(this.active);
    }
  },
  created() {
    const that = this;
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {
        //初始化better-scroll
        probeType: 2, //1 滚动的时候会派发scroll事件，会截流。2滚动的时候实时派发scroll事件，不会截流。 3除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
        click: true, //是否派发click事件
        bounce: {
          top: true
        },
        bounceTime: 2000
      });
      // 滑动过程中事件
      this.scroll.on("scroll", pos => {
        console.log("滚动过程中", pos.y);
        this.scrollConfig.beforePullDown = true;
        this.scrollConfig.bubbleY = Math.max(
          0,
          pos.y + this.scrollConfig.pullDownInitTop - 10
        );
      });
      // 滚动结束
      this.scroll.on("scrollEnd", pos => {
        console.log("滚动结束", pos.y);
      });

      //滑动结束松开事件
      this.scroll.on("touchEnd", pos => {
        this.scrollConfig.beforePullDown = false;
        console.log("鼠标/手指离开", pos.y, this.scroll.maxScrollY);
        //下拉刷新
        if (pos.y > 30) {
          this.scrollConfig.isPullingDown = true;
          console.log("下拉刷新");
          this.scrollConfig.transform =
            "transform: translate(0px, 40px) scale(1) translateZ(0px);";
          //模拟数据请求
          this.getpullDown();
        } else if (pos.y < this.scroll.maxScrollY - 30) {
          //上拉加载
          this.scrollConfig.isPullingUp = true;
          let lateY = `${-this.$refs.content.offsetHeight +
            window.outerHeight -
            50}`;
          console.log("上拉加载中", lateY);
          this.scrollConfig.transform =
            "transform: translate(0px, " +
            lateY +
            "px) scale(1) translateZ(0px);  transition-duration: 1000ms;";
          //模拟数据请求
          this.getpullUp();
        }
      });
    });
  },
  mounted() {
    this.getDataArr();
    this.$refs.content.style.minHeight = `${this.$refs.wrapper.offsetHeight +
      1}px`;
  },
  methods: {
    queryList() {
      const param = {};
      _queryList(param).then(res => {});
    },
    queryUserInfo() {
      const param = {};
      param.name = "";
      param.pageNum = 1;
      param.pageSize = 10;
      _queryTitleInfo(param).then(res => {});
    },
    onSearch() {},
    onCancel() {},
    //模拟数据请求
    getData() {
      return new Promise(resolve => {
        setTimeout(() => {
          const arr = [];
          for (let i = 0; i < 5; i++) {
            +arr.push(count++);
          }
          resolve(arr);
        }, 1500);
      });
    },
    //下拉刷新
    getpullDown() {
      this.getData().then(res => {
        this.scrollConfig.isPullingDown = false;
        setTimeout(() => {
          //刷新数据
          this.scrollConfig.data = [...this.scrollConfig.data];
          //恢复刷新提示文本值
          this.scrollConfig.transform =
            "transform: translate(0px, 0px) scale(1) translateZ(0px);transition-duration: 1000ms;";
          //刷新列表后，重新计算滚动区域高度
          this.scroll.refresh();
        }, 500);
      });
    },
    //上拉加载
    getpullUp() {
      this.getDataArr();
    },
    getDataArr() {
      if (this.proArr.length < 20) {
        axios.post("/api/products").then(res => {
          this.scrollConfig.isPullingUp = false;
          this.proArr = [...this.proArr, ...res.data.data.list];
          if (this.$refs.content.offsetHeight >= window.outerHeight) {
            this.$nextTick(() => {
              console.log(this.$refs.content.offsetHeight);
              this.$refs.wrapper.style.minHeight = window.outerHeight + "px";
            });
          }
          this.scroll.refresh();
        });
      } else {
        this.scrollConfig.isPullingUp = false;
        this.scrollConfig.pullupMsg = "没有更多数据了";
      }
    }
  }
};
</script>
<style>
.wrapper {
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
}

li {
  line-height: 50px;
  border-bottom: 1px solid #f90000;
  text-align: center;
}
.swipe-con {
  max-height: 150px;
}
.swipe-con img {
  width: 100%;
}
.swipe-con van-swipe__track {
  overflow: hidden;
}
.homeNavWarp {
  background: #ffffff;
  border-radius: 4px;
}
.homeItem .van-icon {
  font-size: 24px;
  margin: 12px 0 0;
  color: #4c657f;
}
.homeItem .Icon-text {
  font-size: 12px;
  margin: 8px 0;
}

.handScroll {
  position: fixed;
  top: 0;
  height: 44px;
  width: 100%;
  z-index: 100;
}
.hotWarp {
  border-radius: 4px;
  background: #fff;
  border-top: 1px solid #f8f8f8;
  border-left: 1px solid #f8f8f8;
}
.hotWarp .tr {
}
.hotWarp .info {
  border-right: 1px solid #f8f8f8;
  border-bottom: 1px solid #f8f8f8;
  padding: 0 10px;
}
.hotWarp .info-hd {
}
.hotWarp .info-hd .tit {
  text-align: left;
  font-size: 14px;
  padding-left: 12px;
  line-height: 26px;
}
.hotWarp .proInfo {
  overflow: hidden;
}
.hotWarp .proInfo .pro {
  width: 100%;
}

.proBox {
  margin: 5px -5px 0;
  padding: 0 8px 0 8px;
  overflow: hidden;
}
.proBox .lis {
  float: left;
  width: calc(50% - 10px);
  overflow: hidden;
  padding: 10px;
  background: #fff;
  box-sizing: border-box;
  margin: 10px 5px 0;
}
.proBox .img-wrap {
}
.proBox .img-wrap img {
  display: block;
  width: 100%;
}
.proBox .pro-info {
  margin: 5px 0;
  text-align: left;
}
.proBox .pro-info .tit {
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 5px;
}
.proBox .pro-info .label {
  border: 1px solid #e4393c;
  border-radius: 3px;
  margin-right: 5px;
  font-size: 12px;
  padding: 1px 2px;
  color: #e4393c;
}
.proBox .pro-info .site {
  color: #999999;
  font-size: 12px;
}
.proBox .price-con {
  margin-top: 8px;
}
.proBox .price {
  color: #ed3b3d;
  margin-right: 5px;
  font-size: 12px;
}
.proBox .price em {
  font-size: 14px;
}
.proBox .pro-hot {
  font-size: 12px;
  color: #999;
}
.proBox .proInfo {
  display: inline-block;
  margin-top: 5px;
  font-size: 12px;
  color: #999;
}

/* 下拉、上拉提示信息 */
.top-tip {
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 1;
  width: 100%;
  /* height: 50px;
  line-height: 50px; */
  text-align: center;
  color: #555;
}

.bottom-tip {
  width: 100%;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #777;
  background: #f2f2f2;
}
.content {
  overflow: auto;
  border-top: none;
}
</style>

